<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <table border="1" width="400" align="center">
    <tr>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
    </tr>
    <tr>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
    </tr>
    <tr>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
    </tr>
  </table>
</body>
<script>

  // 正常事件实现
  // var td = document.querySelectorAll("td");
  // td.forEach(function(val, idx){
  //   val.onclick = function(){
  //     // 创建元素
  //     var ipt = document.createElement("input")
  //     // 将td的内容设置到输入框
  //     ipt.value = this.innerHTML;
  //     // 清空td内容
  //     this.innerHTML = "";
  //     // 获取焦点
  //     // ipt.autofocus = true;
  //     // 将输入框插入td
  //     this.appendChild(ipt);
  //     // 获取焦点
  //     ipt.focus();

  //     // 取消输入框的点击事件冒泡
  //     ipt.onclick = function(eve){
  //       eve.stopPropagation();
  //     }

  //     var that = this;
  //     // 输入框失去焦点时，将输入框内容设置回td
  //     ipt.onblur = function(){
  //       that.innerHTML = this.value;
  //     }
  //   }
  // })


  // 事件委托实现
  var table = document.querySelector("table");
  table.addEventListener("click", function(eve){
    var e = eve || window.event;
    var target = e.target || e.srcElement;
    if(target.tagName === "TD"){
      // 创建元素
      var ipt = document.createElement("input");
      // 将td的内容设置到输入框
      ipt.value = target.innerHTML;
      // 清空td内容
      target.innerHTML = "";
      // 将输入框插入td
      target.appendChild(ipt);
      // 获取焦点
      ipt.focus();
      // 输入框失去焦点时，将输入框内容设置回td
      ipt.onblur = function(){
        target.innerHTML = this.value;
      }
    }
  })



  
</script>
</html>